<script setup>
import dayjs from 'dayjs'
import { useDictionary } from '@/use/use-dictionary'

const props = defineProps({
  week: Object,
  tasks: Array,
})

const { week, tasks } = toRefs(props)

const dict = useDictionary(['work_time'])

const weekStartTime = dayjs().week(week.value.label).startOf('week')

const weekEndTime = weekStartTime.endOf('week')

const halfDayWidth = 40

const planTaskList = ref([])

const estimateTaskList = ref([])

watchEffect(() => {
  planTaskList.value = createStyle('planBegintime', 'planEndtime')
  estimateTaskList.value = createStyle('currentBegintime', 'currentEndtime')
})

function createStyle(startKey, endKey) {
  return tasks.value
    .filter((i) => {
      return (
        dayjs(i[startKey]).isBetween(weekStartTime, weekEndTime, 'day', '[]') ||
        dayjs(i[endKey]).isBetween(weekStartTime, weekEndTime, 'day', '[]') ||
        (dayjs(i[startKey]).valueOf() <= weekStartTime.valueOf() && dayjs(i[endKey]).valueOf() >= weekEndTime.valueOf())
      )
    })
    .map((item) => {
      const i = JSON.parse(JSON.stringify(item))
      let width, left
      const startTime = dayjs(i[startKey]).isBefore(weekStartTime) ? weekStartTime : dayjs(i[startKey])
      const endTime = dayjs(i[endKey]).isAfter(weekEndTime) ? weekEndTime : dayjs(i[endKey])
      const startIsMorning =
        startTime.valueOf() < dayjs(startTime.format('YYYY-MM-DD') + ` ${dict.getCode('work_time', '3')}`).valueOf()
      const endIsMorning =
        endTime.valueOf() < dayjs(endTime.format('YYYY-MM-DD') + ` ${dict.getCode('work_time', '3')}`).valueOf()
      width = endTime.diff(startTime, 'day') * halfDayWidth * 2 + (endIsMorning ? 1 : 2) * halfDayWidth - 6
      left = dayjs(startTime).diff(weekStartTime, 'day') * halfDayWidth * 2 - (startIsMorning ? 0 : halfDayWidth) + 3
      i.style = {
        left,
        width,
      }
      return i
    })
}
</script>

<template>
  <div class="week-line">
    <div class="week-label">{{ week.label }}</div>
    <div style="flex: 1">
      <div class="row">
        <div
          class="day"
          v-for="(day, dayIndex) in week.days"
          :key="dayIndex"
          :style="{
            backgroundColor: day.isRestDay ? 'var(--elp-bg-color-page)' : null,
            zIndex: day.isRestDay ? 1 : null,
          }">
          <div class="day-label">{{ day.label }}</div>
          <div style="display: flex">
            <div class="half-day">上午</div>
            <div class="half-day">下午</div>
          </div>
        </div>
      </div>
      <div class="row">
        <TaskLine
          v-for="(task, taskIndex) in planTaskList"
          :key="taskIndex"
          v-model:left="task.style.left"
          v-model:width="task.style.width"
          :task="task"></TaskLine>
        <div
          class="day"
          v-for="(day, dayIndex) in week.days"
          :key="dayIndex"
          :style="{
            backgroundColor: day.isRestDay ? 'var(--elp-bg-color-page)' : null,
            zIndex: day.isRestDay ? 1 : null,
          }">
          <div style="display: flex">
            <div class="half-day space"></div>
            <div class="half-day space"></div>
          </div>
        </div>
      </div>
      <div class="row">
        <TaskLine
          v-for="(task, taskIndex) in estimateTaskList"
          :key="taskIndex"
          v-model:left="task.style.left"
          v-model:width="task.style.width"
          :disabled="false"
          :task="task"></TaskLine>
        <div
          class="day"
          v-for="(day, dayIndex) in week.days"
          :key="dayIndex"
          :style="{
            backgroundColor: day.isRestDay ? 'var(--elp-bg-color-page)' : null,
            zIndex: day.isRestDay ? 1 : null,
          }">
          <div style="display: flex">
            <div class="half-day space"></div>
            <div class="half-day space"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.week-line {
  @include use-flex();
  &:not(:last-child) {
    border-bottom: var(--elp-border);
  }
  .week-label {
    @include use-flex(center, center);
    width: 60px;
  }
  .row {
    position: relative;
    @include use-flex(center);
    &:not(:last-child) {
      border-bottom: var(--elp-border);
    }
    .task-item {
      position: absolute;
    }
    .day {
      text-align: center;
      .day-label {
        border-bottom: var(--elp-border);
        border-left: var(--elp-border);
      }
      .half-day {
        width: 40px;
        border-left: var(--elp-border);
      }
    }
    .space {
      height: 30px;
    }
  }
}
</style>
